<template>
  <div>
    <div class="demo-title">
      表单设计
      <a-button @click="handleSaveForm">保存</a-button>
      <a-button type="primary">预览</a-button>
    </div>
    <div class="demo-content">
      <yly-form-design
        ref="ylyFormDesignRef"
        :formId="formId"
        :formConfigData="formConfigData"
        :formCode="'test'"
        :formBaseInfo="formBaseInfo"
        :renderScene="'ide'"
        :renderClient="'WEB'"
      />
    </div>
  </div>
</template>

<script>
import YlyFormDesign from '../packages/yly-form-design/yly-form-design'
import DemoFormEdit from './demo-form-edit/index.vue'
import { getJSON, parseJSON } from "@/utils/util"
export default {
  name: 'IndexPage',
  components: {
    YlyFormDesign,
    DemoFormEdit
  },
  provide() {
    return {}
  },
  data(){
    return {
      formBaseInfo: {
        formCode: ''
      },
      formConfigData: {
        formItemList: [],
        formPageConfig: {
          isEdit: false,
          formMode: 0, // 表单模式:1:列表表单,2:菜单表单,3:按钮表单
          layout: "horizontal",
          labelCol: { span: 4 },
          wrapperCol: { span: 18 },
          hideRequiredMark: false,
          customStyle: "",
          isPrint: false,
          onlineFormCode: ""
        },
        fieldList: []
      },
      formId: '902484a6c81bc79cb43c8085ae8a0f0f',
      fieldList: []
    }
  },
  computed:{
  },
  created(){
    this.queryFormConfig()
  },
  methods:{
    queryFormConfig() {
      const params = { formId: this.formId }
      this.$api.QueryFormConfigDetails(params).then((res) => {
        const { attachTabList, fieldList, formComponent } = res.result
        this.formBaseInfo = formComponent
        const formConfigData = parseJSON(formComponent.htmlJson)
        Object.assign(this.formConfigData, {
          ...formConfigData,
          fieldList
        })
        this.$refs.ylyFormDesignRef.initFormConfig({
          formComponentConfig: formComponent,
          fieldList: fieldList,
          attachTabList: attachTabList
        })
        this.fieldList = fieldList
      })
    },
    handleChangeTab() {
      this.formData.list.forEach(item => {
        console.log(item)
        item.model = item.key
      })
    },
    handleSaveForm() {
      // this.$refs.ylyFormDesignRef.saveFormConfig()
    }
  },
}
</script>

<style lang="scss">
.demo-title {
  height: 60px;
  line-height: 60px;
  font-size: 24px;
}
.demo-content{
  height: calc(100vh - 60px);
}
</style>

